<!DOCTYPE html>
<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>jQurey画线条</title>
 <script type ="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
 <style type = "text/css">
  body{
  /*background:#000000;*/
  }
  #fa{
  width:400px;
  height:400px;
  margin:100px auto;
  /*background:#4b4b4b;*/
  background-image:url(http://mpic.tiankong.com/fa1/fff/fa1fff9f578b8b725ae9ef695b51437e/1p-1693.jpg);
  background-repeat:no-repeat; /*设置背景图片是否重复平铺*/
  /*background-position:center;*/
  background-position:-130px -50px;
  background-color: #000000;
  position: relative;
  }

  .frame{
   border:5px red solid;
   position: absolute;
   visibility:hidden;
  }
 </style>
 <script type = "text/javascript">
  function frame(top, left, width) {
   $("#fa").append('<div class="frame" style="width: '+width+'px;height:'+width+'px;top:'+top+'px;left:'+left+'px;visibility:visible"></div>');
  }
 </script>
 </head>
 <body>
 <input type = "button" value = "11111" id = "test" onclick="frame(80, 50, 50);"/>
 <input type = "button" value = "11111" id = "test" onclick="frame(100, 50, 60);"/>

 <div id = "fa">
  <div class="frame"></div>
 </div>
 </body>
</html>